﻿<pre>
知识点一：事件概念的理解
	事件其实就是动作(发生了一件事)，例如：单击鼠标，敲打键盘等这些都是事件。
	事件必背单词：event 。事件是真正编程中最实用的部分，本章围绕事件特点和用法进行讲解。

知识点二：事件的执行原理来源
	假设有N个DIV做的同心圆，那么我们点击圆心，这个事件算是哪个圆的呢？ 还是都算呢？
	或者再例如：三个重叠的DIV，就类似蛋糕一样,见上图event1.jpg，颜色分别为蓝色、绿色和灰色。
	如果我点击绿色，灰色算不算被点击呢？ 因为绿色在灰色上面。
	如果灰色算是被点击了，那么是算先点击了灰色呢还是先点击了蓝色呢？
浏览器统一规定：如果点击一个小盒子，那么所有包含他的大盒子都认为是被点击了。但是产生了两个门派。
	1、有的认为是先点击小的，然后才点击大的，这样一层层向上形式，这种被称为《冒泡型事件流》
	2、有认为是先点击了大的浏览器，然后是浏览器中的打元素，直到最小的元素，这种理论被称为《捕获型事件流》
	说明：在多IE老版本浏览器中只支持《冒泡型事件流》，但是新的主流浏览器基本都同时支持这两种。
	真正项目中主要使用《冒泡型事件流》对于捕获型事件流了解即可，不做深入讨论。

知识点三：事件类型
	事件类型很多我们常用就以下几种。
	1、鼠标事件（例如：单击，双击，右击，滚轮）
	2、键盘事件（例如：按下某个键，会有对应的动作）
	3、焦点事件（例如：点击某个元素称为获取焦点(就是当前正被使用的元素)，不在当前使用的就是失去焦点）
	4、UI事件  （例如：网页完全被加载后会触发load事件，浏览器被关闭时候触发unload事件，
						unload事件因为被恶意使用，导致浏览器无法关闭或关闭后弹出广告等被很多浏览器禁止。
						）
说明：UI事件中最实用和最常用的就剩load了，要获取具体的事件需要使用事件监听功能，下一节事件监听。
</pre>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>事件概述</title>
		<style type="text/css">
			#grey {
				width: 500px;
				height: 300px;
				background-color: #CCC;
				position: relative;
			}
			
			#green {
				width: 300px;
				height: 150px;
				background-color: #0C3;
				position: absolute;
			}
			
			#blue {
				width: 200px;
				height: 200px;
				background-color: #09C;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="grey">
			<div id="green"> 绿色
				<div id="blue">蓝色</div>
			</div>
		</div>

	</body>

</html>